<template>
	<div class="exam-wrap">
		<header class="time">
			<p style="">剩余<span style="color: #ef4f4f;line-height: 50px;font-size: 16px;margin-left: 3px;">{{examtime}}</span></p>
		</header>
		<div class="main clearfix">

			<div class="test-main fl">
				<div class="title" ref="titbox">
					<p class="title-sign">
						<span>{{nowType == '㊔'?'单选': nowType == '㊌'?'多选':nowType == '㊋'?'是非':nowType == '㊏'?'名词解释':nowType == '㊕'?'填空':nowType == '㊐'?'简答':nowType == '㊊'?'阅读理解':nowType == '㊎'?'单选共用题干':'单选共用备用答案'}}</span> {{nowTitle}}
					</p>
				</div>
				<div class="option-choose">
					<mt-radio :options="nowType == '㊔' ? nowOptions: judgeOptions" v-model="answerVal" @change="changes($event,1)"  v-if="nowType == '㊔' || nowType == '㊋'"></mt-radio>
					<mt-checklist :options="nowOptions" v-model="answerArr" @change="changes($event,2)"  v-if="nowType == '㊌'"></mt-checklist>
					<mt-field v-if="nowType == '㊏' ||nowType == '㊐'" label="答案" placeholder="请输入" type="textarea" rows="4" v-model="textareaVal" @input="changes($event,4)"></mt-field>
					<mt-field v-for="(item,index) in supplynum" :key="index" v-if="nowType == '㊕'" :label="'答案' + (index + 1)" placeholder="请输入" v-model="supplyVal[index]" @input="changes($event,5)"></mt-field>

					<!-- 多题 -->
					<div class="more-box" v-for="(item,index) in moredataList" :key="index+10" v-if="nowType == '㊎' || nowType == '㊍' || nowType == '㊊'">
						<!-- 多题时题目 -->
						<p class="moretitle title-sign"><span style="font-size: 12px;margin-right: 3px;background-color: #f47023;">{{item.type == '㊔'?'单选': item.type == '㊌'?'多选':item.type == '㊋'?'是非':item.type == '㊏'?'名词解释':item.type == '㊕'?'填空':item.type == '㊐'?'简答':item.type == '㊊'?'阅读理解':item.type == '㊎'?'单选':'单选'}}</span>{{index+1}}.{{item.question}}</p>
						<!-- 多题时选项 -->
						<div class="choose-box">

							<div v-if="nowType == '㊎' || nowType == '㊍'">
								<mt-radio v-if="nowType == '㊎' || nowType == '㊍'" :options="item.options" :name="'aa' + index" @change="changes($event,6,index)" v-model="choosearr[index]"></mt-radio>
							</div>
							<div v-if="nowType == '㊊'">
								<mt-radio v-if="item.type == '㊔' || item.type == '㊋'" :options="item.options" :name="'aa' + index" @change="changes($event,11,index)" v-model="choosearr[index]"></mt-radio>
							    <mt-checklist :options="item.options" @change="changes($event,12,index)" v-model="answerArrmore" v-if="item.type == '㊌'"></mt-checklist>								
								<mt-field style="padding-top: 10px;"  v-if="item.type == '㊏' || item.type == '㊐'" label="答案" placeholder="请输入" type="textarea" rows="4" v-model="textareaArr[index]" @input="changes($event,13,index)"></mt-field>
								<mt-field style="padding-top: 10px;" v-for="(item,indexs) in supplynum" :key="indexs" v-if="item.type == '㊕'" :label="'答案' + (indexs + 1)" placeholder="请输入" v-model="supplyValmore[index][indexs]" @input="changes($event,14,index)"></mt-field>
							</div>

						</div>
					</div>

				</div>

			</div>

		</div>
		<div class="btn-box">
			
			<mt-button type="primary" size="large" v-if="nowNum != answerlistArr.length" :disabled="nowNum == 1? true: false" @click="prevtest">&lt; 上一题</mt-button>
			<mt-button type="primary" size="large" v-if="nowNum != answerlistArr.length" :disabled="nowNum == answerlistArr.length? true: false" @click="nexttest">下一题 &gt;</mt-button>
			<mt-button type="danger" size="large" v-if="nowNum == answerlistArr.length" @click="submit">提交</mt-button>
		</div>
		<div class="test-sign">
		     <ul class="slide-page">
				<li id="xuanz" v-for="(item,index) in answerlistArr.length" :key="index" :class="index+1 == nowNum?'signactive':answerlistArr[index].answer=='' || answerlistArr[index].answer[0].answer==''?'':'xuanzhongclocr'" @click="subchanges(index+1)">{{index+1}}</li>
			</ul>
		</div>

	</div>
</template>

<style>
	html,
	body,
	#app {}
	
	.exam-wrap {
		padding: 0px 0px 20px;
	}
	
	.time {
		font-size: 16px;
		text-align: center;
		height: 7%;
		display: flex;
		justify-content: center;
		align-items: Center;
	}
	
	.slide-box {
		height: 93%;
	}
	
	.mint-cell-wrapper {
		padding: 0;
		text-align: left;
	}
	
	.swiper-container-horizontal .slider-pagination-bullet-active,
	.swiper-container-vertical .slider-pagination-bullet-active {
		background: #26a2ff none repeat scroll 0 0;
	}
	
	.main {
		padding: 0px 15px;
		position: relative;
	}
	
	.test-main {
		width: 90%;
	}
	
	.title-sign {
		padding: 0px 3px 0px 0px;
		line-height: 1.5em;
	}
	
	.title-sign>span {
		background-color: #ef4f4f;
		color: #fff;
		padding: 3px;
		border-radius: 5px;
	}
	
	.test-sign {
		width: 10%;
		position: fixed;
		right: 15px;
		top: 50%;
		margin-top: -150px;
	}
	
	.option-choose {
		padding: 10px 0px;
	}
	
	.btn-box {
		text-align: center;
		padding-top: 30px;
	}
	
	.btn-box button {
		width: 32%;
		display: inline-block;
		margin: 0 2%;
	}
	
	.slide-page {
		overflow-y: scroll;
		height: 250px;
	}
	
	.slide-page>li {
		width: 20px;
		height: 20px;
		line-height: 20px;
		border-radius: 50%;
		text-align: center;
		margin: 10px auto;
		background: rgba(0, 0, 0, .2);
	}
	
	.slide-page>li.signactive {
		background: #26a2ff;
		color: #fff;
	}
	
	.slide-page>li.xuanzhongclocr {
		background: #666666;
		color: #fff;
	}
	
	.slide-page>li.xuanzhongclocra {
		background: rgba(0, 0, 0, .2);
	}
	
	.title-text {
		text-align: left;
	}
	
	.more-box {
		padding: 10px 0px;
	}
</style>

<script>
	import conf from '../config/userconf.js'
	export default {
		name: "exam",
		data() {
			return {
				worker: null, //vue-worker把复杂的web worker封装起来    二线程
				titcontwidth: '', //标题内容宽度
				nowTitle: '', //当前题标题
				nowType: '', //当前题类型 单选题共用题干㊎ 单选题共用备用答案㊍ 多选题㊌ 是非题㊋ 名词解释㊏ 填空题㊕  问答题㊐ 单选题㊔ 阅读理解㊊
				nowOptions: [], //当前题选项（单选、多选）
				nowsingleOptions: {}, //单选题共用题干  当前题选项（单选）
				judgeOptions: [ //当前题选项（判断）
					{
						label: '正确',
						value: 'A'
					},
					{
						label: '错误',
						value: 'B'
					},
				],
				nowNum: 1, //当前题号
				answerlistArr: [], //已做题的答案
				answerVal: '', //答案值字符串（单选）
				answerArr: [], //答案值数组（多选）
				questionList: [], //所有题目
				textareaVal: '', //名词解释、简答  答案
				textareaArr: [],  //名词解释、简答   多题答案
				supplyVal: [], //填空  答案值
				examtime: '', //考试剩余时间
				totaltimer: '', //考试总时长
				supplynum: 0, //填空题的答案个数
				// initdataList: [],  //初始数据 
				moredataList: [], //多题数据 
				choosearr: [],  //阅读理解    多个  单选
				supplyValmore: [],  //阅读理解    多个  填空
				answerArrmore: [],  //阅读理解    多个  多选
				choosemorearr: [],
				
				// moretitle: '',  //多题题干
				// moredatachooseArr: [],  //阅读理解多选题  v-model的数据
				
			};
		},
		methods: {
			//初始化页面数据处理
			init(data = Object()) {
				
				var _this = this;
				
				data.id = this.$route.query.id;  //试卷id
				conf.exams.questionlistpaper(data, (state, res) => {
					if(state == 'success' && res.data.status == 1) {
						// console.log(res.data);
						this.questionList = res.data.other.list;
//						console.log(this.questionList);
						var showEndTime = res.data.other.info.showEndTime;
						var current = res.data.other.current;
						
						//倒计时
						
						var endtime = this.timeToTimestamp(showEndTime)/1000;
						
						if(current >= Math.ceil(endtime)){
							alert('考试已结束');
						} else{
							var examtimes = Math.ceil(endtime) - current;
							setInterval(function(){
								   examtimes--;
								   if(examtimes <= 0){
								   		alert('考试结束，试卷已提交！');
								   		//试卷提交
								   }else{
								   		var hour=Math.floor(parseInt(examtimes)/60/60%24);
								   		if (parseInt(hour) < 10){
					                   		hour = '0'+hour;
					                   }
					                   var min=Math.floor(parseInt(examtimes)/60%60);
					                   if (parseInt(min) < 10){
					                   		min = '0'+min;
					                   }				                   
					                   
					                   var sec=Math.floor(parseInt(examtimes)%60);
	
					                   if (parseInt(sec) < 10){
					                   		sec = '0'+sec;
					                   }
					                   _this.examtime=hour+":"+min+":"+sec;
								   }
								   

							},1000)
						}

						//单选题共用题干㊎ 单选题共用备用答案㊍ 多选题㊌ 是非题㊋ 名词解释㊏ 填空题㊕  问答题㊐ 单选题㊔ 阅读理解㊊

						//默认给第一题赋值
						if(this.questionList[0].type != '㊊') { //阅读理解
							this.nowTitle = this.questionList[0].content[0].question; //题目
							this.nowType = this.questionList[0].type; //题型
							if(this.questionList[0].type == '㊔' || this.questionList[0].type == '㊌') { //单选题、多选题
								this.nowOptions = this.questionList[0].content[0].options; //选项
							}
							if(this.questionList[0].type == '㊕') { //填空题
								this.supplynum = this.questionList[0].content[0].num; //答案个数
							}
							if(this.questionList[0].type == '㊎') { //单选题共用题干  当前题选项（单选）
								this.nowTitle = this.questionList[0].description; //多题题干
								this.moredataList = this.questionList[0].content; //多题数据
							}
							if(this.questionList[0].type == '㊍') { //单选题共用备用答案  当前题选项（单选）
								this.nowTitle = '';
								this.moredataList = this.questionList[0].content; //多题数据
							}

						} else {
							this.nowTitle = this.questionList[0].questions[0].title; //题目
							this.nowType = this.questionList[0].questions[0].type; //题型
							//构造   阅读理解  子题题型为 多选
							// for(var i=0; i<this.questionList[0].content.length;i++){
							//     if(this.questionList[0].content[i].type == '㊌'){
							//         this.moredatachooseArr.push([]);
							//     }
							// }
						}

						//构造需要提交的默认数据
						for(var i = 0; i < res.data.other.list.length; i++) {

							if(res.data.other.list[i].type == '㊌' || res.data.other.list[i].type == '㊋' || res.data.other.list[i].type == '㊏' || res.data.other.list[i].type == '㊐' || res.data.other.list[i].type == '㊔') {

								this.answerlistArr.push({
									id: res.data.other.list[i].id,
									answer: '',
									type: res.data.other.list[i].type
								});

							} else if(res.data.other.list[i].type == '㊕' || res.data.other.list[i].type == '㊎' || res.data.other.list[i].type == '㊍') {

								this.answerlistArr.push({
									id: res.data.other.list[i].id,
									answer: [],
									type: res.data.other.list[i].type
								});

							} else if(res.data.other.list[i].type == '㊊') {

								var dataarr = [];
								for(var j = 0; j < res.data.other.list[i].content.length; j++) {
									if( res.data.other.list[i].content[j].type == '㊋' || res.data.other.list[i].content[j].type == '㊔') {
										dataarr.push({
											type: res.data.other.list[i].content[j].type,
											answer: ''
										});
//										this.choosearr.concat([]);  //单选
									} else if(res.data.other.list[i].content[j].type == '㊌') {

										dataarr.push({
											type: res.data.other.list[i].content[j].type,
											answer: ''
										});
//										this.answerArrmore[0]=[];  //多选
										console.log(this.answerArrmore);
									} else if(res.data.other.list[i].content[j].type == '㊏' || res.data.other.list[i].content[j].type == '㊐') {
										dataarr.push({
											type: res.data.other.list[i].content[j].type,
											answer: ''
										});
//										this.textareaArr.concat([]);  //名词解释、简答
									} else if(res.data.other.list[i].content[j].type == '㊕') {
										dataarr.push({
											type: res.data.other.list[i].content[j].type,
											answer: []
										});
//										this.supplyValmore.concat([]);  //填空
									}


								}

								this.answerlistArr.push({
									id: res.data.other.list[i].id,
									answer: dataarr,
									type: res.data.other.list[i].type
								});
								
							}

						}

						console.log(this.answerlistArr);
					} else if(state == 'success' && res.data.status != 1) {
						this.$toast(res.data.message);
					}
				})

			},
			//change
			changes(val, sign, index) {
				console.log(val);
				//val 值   sign题型   index(多选题里的下标)
				// 1 单选题  2.多选题  3.是非题  4.名词解释、问答题   5.填空题 6.多题单选题   ||  11 多题 单选，是非    12 多题 多选   13 多题名词解释、简答  答案    14 多题填空
			    if(sign == 1 || sign == 3) {
			    	this.answerVal = val;
					this.answerlistArr[this.nowNum - 1].answer = this.answerVal;
				} else if(sign == 2) {
					this.answerArr= val;
                 	this.answerlistArr[this.nowNum - 1].answer = this.answerArr.join();
				} else if(sign == 4) {
					this.textareaVal = val;
					this.answerlistArr[this.nowNum - 1].answer = this.textareaVal;
				} else if(sign == 5) {
 					this.supplyVal = val;
					this.answerlistArr[this.nowNum - 1].answer = this.supplyVal;
				} else if(sign == 6) {
					this.choosearr[index] = val;
      				this.answerlistArr[this.nowNum - 1].answer = this.choosearr.join();
				} else if(sign == 11) {
					this.choosearr[index] = val;
					this.answerlistArr[this.nowNum - 1].answer[index].answer = this.choosearr.join();
				} else if(sign == 12) {
					this.answerArrmore= val;
					this.answerlistArr[this.nowNum - 1].answer[index].answer = this.answerArrmore.join();
					
				} else if(sign == 13) {
					
					this.textareaArr[index] = val;
					this.answerlistArr[this.nowNum - 1].answer[index].answer = this.textareaArr[index];
				} else if(sign == 14) {
					this.supplyValmore[index] = val;
					this.answerlistArr[this.nowNum - 1].answer[index].answer = this.supplyValmore[index];
				}
				console.log(this.answerlistArr);
				
				
				
			},
			//上一题
			prevtest() {
				
				this.nowNum--; //题号
				console.log(this.nowNum);
				this.managedata(this.nowNum - 1, 0);
			},
			//下一题
			nexttest() {
				
				this.nowNum++; //题号
				console.log(this.nowNum);
				this.managedata(this.nowNum-1, 1);
			},
			//切换题号
			subchanges(ind) {
				
				this.nowNum = ind; //题号
				console.log(ind, this.nowNum);
				this.managedata(ind - 1, 2);
			},
			//通用处理数据函数
			managedata(sub, type) {

				if(this.questionList[sub].type != '㊊') {
					this.nowTitle = this.questionList[sub].content[0].question; //题目
					if(this.questionList[sub].type == '㊔' || this.questionList[sub].type == '㊌') {
						this.nowOptions = this.questionList[sub].content[0].options; //选项
					}

					if(this.questionList[sub].type == '㊕') { //填空题
						this.supplynum = this.questionList[sub].content[0].num; //答案个数
					}

					if(this.questionList[sub].type == '㊎') { //单选题共用题干  当前题选项（单选）
						this.nowTitle = this.questionList[sub].description; //多题题干
						this.moredataList = this.questionList[sub].content; //多题数据
					}

					if(this.questionList[sub].type == '㊍') { //单选题共用备用答案  当前题选项（单选）
						this.nowTitle = '';
						this.moredataList = this.questionList[sub].content; //多题数据
					}

					this.nowType = this.questionList[sub].type; //题型
//					if(type == 0) { //type 0为上一题，1为下一题，2为跳转
//						this.nowNum--; //题号
//					} else if(type == 1) {
//						this.nowNum++; //题号
//					} else if(type == 2) {
//						this.nowNum = sub + 1; //题号
//					}

				} else {

					// "男性，25岁，主诉心前区疼痛2小时，向左肩放射，吸气时疼痛加重，坐位时减轻，伴有畏寒、发热就诊，体检:血压105/75mmHg，体温38T，心率110次/分，规则，心脏无杂音，两肺未见异常，
					// 有血吸虫病史。心电图示除AVR与V外各导联ST段抬高，具体可以播放此视频㊞http://down.pubtsg.com:8080/enpdf/2015102/AIWalkman.mp4㊡也可以查看此照片㊟http://down.pubtsg.com:
					// 8080/enpdf/2015102/shenzhen.JPG㊡或者听音频㊗http://down.pubtsg.com:8080/enpdf/2015102/xiaowei.mp3㊡"

					var str = this.questionList[sub].description;
					// console.log(str);
//					str = str.match(/^㊞(\S*)㊡$/);
//					console.log(str); //结果

					this.nowTitle = this.questionList[sub].description; //题目
					this.moredataList = this.questionList[sub].content; //多题数据
					console.log(this.moredataList);
					this.nowType = this.questionList[sub].type; //题型
//					this.nowNum++; //题号
				}

				// 1 单选 2 多选 3 是非题 4 名词解释 5 填空  6 简答 7 阅读理解
				//单选题共用题干㊎ 单选题共用备用答案㊍ 多选题㊌ 是非题㊋ 名词解释㊏ 填空题㊕  问答题㊐ 单选题㊔ 阅读理解㊊
                
				//赋值已选/填的答案
				if(this.answerlistArr[sub].answer) {
					
					if(this.questionList[sub].type == '㊔' || this.questionList[sub].type == '㊋') { //单选、判断
						alert(this.answerlistArr[sub].answer);
						this.answerVal = this.answerlistArr[sub].answer;
					} else if(this.questionList[sub].type == '㊌') { //多选
						this.answerArr = this.answerlistArr[sub].answer.split('');
					} else if(this.questionList[sub].type == '㊏' || this.questionList[sub].type == '㊐') {
						this.textareaVal = this.answerlistArr[sub].answer;
					} else if(this.questionList[sub].type == '㊕') {
						this.supplyVal = this.answerlistArr[sub].answer;
					} else if(this.questionList[sub].type == '㊎' || this.questionList[sub].type == '㊍') {
						this.choosearr = [];
						if(this.answerlistArr[sub].answer!=""){
							var strs = new Array(); //定义一数组 
						    strs = this.answerlistArr[sub].answer.split(","); //字符分割 
						    for(i = 0; i < strs.length; i++) {
							   this.choosearr[i]=strs[i];
							}
							
						}
					} else if(this.questionList[sub].type == '㊊') {
						this.choosemorearr = [];  //多个单选
						this.answerArrmore = [];  //多个多选
						this.supplyValmore = [];  //多个填空
						this.textareaArr = [];  //多个简答
						var kk=this.answerlistArr[sub].answer.length;
					    for(var i=0; i<kk ;i++){
							
							if(this.answerlistArr[sub].answer[i].type=='㊔' || this.answerlistArr[sub].answer[i].type=='㊋'){
								this.choosearr[i]=this.answerlistArr[sub].answer[i].answer;
							}else if(this.answerlistArr[sub].answer[i].type=='㊌'){
								
								this.answerArrmore=this.answerlistArr[sub].answer[i].answer.split('');
								
							}else if (this.answerlistArr[sub].answer[i].type=='㊏' || this.answerlistArr[sub].answer[i].type == '㊐'){
								
								this.textareaArr[i]=this.answerlistArr[sub].answer[i].answer;
								
							}else if(this.answerlistArr[sub].answer[i].type=='㊕'){
								
								this.supplyValmore[i]=this.answerlistArr[sub].answer[i].answer;
								
							}
					    }
					    
                    }
					
				} else{
					//切换时，重置答案（因为答案绑定的值是共用的）
					this.answerVal = '';
					this.answerArr = [];
					this.choosearr = [];
					this.choosemorearr = [];
					this.textareaVal = '';
				}
			},
			//日期转时间戳
			timeToTimestamp(dates){
				var datess = new Date(dates);
			    // 有三种方式获取
			    return datess.getTime();
			},
			//提交
			submit(data=Object()) {
				
				
				data.paperid = this.$route.query.id;  //试卷id
				data.answer = this.answerlistArr;  //答案
				
				console.log(data);
				conf.exams.paperSubmit(data, (state, res) => {
					if(state == 'success' && res.data.status == 1) {
						this.$toast(res.data.message);
					}else if(state == 'success' && res.data.status != 1) {
						this.$toast(res.data.message);
					}
				})
			},

		},
		mounted() {
			this.init();
		},
		destroyed() {
			// 通过赋值null的方式，释放掉worker引用，这样就可以关闭worker，这是作者在github上说的
			// this.worker = null

		},
		beforeCreate: function() {

		}


	}

</script>